<template>
    <mian-layout @refresh="resetForm('search_data')">
        <template v-slot:conTop>
            <div class="myanfbtntabbox">
                <el-tabs v-if="totalRow.waitAuditNum" v-model="search.status" @tab-click="reSetData">
                    <el-tab-pane :label="`待审核(${totalRow.waitAuditNum})`" name="WAIT_AUDIT"></el-tab-pane>
                    <el-tab-pane :label="`已上架(${totalRow.upNum})`" name="UP"></el-tab-pane>
                    <el-tab-pane :label="`已下架(${totalRow.downNum})`" name="DOWN"></el-tab-pane>
                </el-tabs>
            </div>
            <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                <el-form-item label="商品名称" prop="title">
					<el-input v-model="search.title" placeholder="商品名称"></el-input>
				</el-form-item>
                <el-form-item label="商品分类" prop="status">
					<goods-category v-model="search.goodsCategoryId" valuekey="goodsCategoryId" label="name"/>
				</el-form-item>
                <el-form-item label="商品类型" prop="goodsType">
					<el-select v-model="search.goodsType" placeholder="选择商品类型">
						<el-option  label="实物类商品" :value="1"> </el-option>
					    <el-option  label="3D实物类商品" :value="2"> </el-option>
                        <el-option  label="视频" :value="3"> </el-option>
                        <el-option  label="音乐" :value="4"> </el-option>
                        <el-option  label="3D数字模型类" :value="5"> </el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="创建时间" prop="dataTime">
                        <el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" />
                    </el-form-item>
                <el-form-item>
					<el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
				</el-form-item>
            </el-form>   
        </template>
        <!-- <div class="myanfbtntabbox">
            <el-tabs v-if="totalRow.waitAuditNum" v-model="search.status" @tab-click="reSetData">
                <el-tab-pane :label="`待审核(${totalRow.waitAuditNum})`" name="WAIT_AUDIT"></el-tab-pane>
                <el-tab-pane :label="`已上架(${totalRow.upNum})`" name="UP"></el-tab-pane>
                <el-tab-pane :label="`已下架(${totalRow.downNum})`" name="DOWN"></el-tab-pane>
            </el-tabs>
            <div class="mybtn">
                <el-button type="success" size="small" icon="el-icon-plus" @click="goAdd">发布新商品</el-button>
            </div>
        </div> -->
        <div class="btnBox" style="padding-bottom:10px">
            <el-button type="success" size="small" icon="el-icon-plus" @click="goAdd">发布新商品</el-button>   
        </div>
        <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page'>
            <el-table-column property="title" label="商品名称" align='left'></el-table-column>
            <el-table-column property="goodsCategoryName" label="商品分类" align='center' width="150"></el-table-column>
            <el-table-column property="goodsType" label="商品类型" align='center' width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.goodsType==1">实物类商品</span>
                    <span v-else-if="scope.row.goodsType==2">3D实物类商品</span>
                    <span v-else-if="scope.row.goodsType==3">视频</span>
                    <span v-else-if="scope.row.goodsType==4">音乐</span>
                    <span v-else-if="scope.row.goodsType==5">3D数字模型</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>

            <el-table-column property="stock" label="库存" align='center' width="80"></el-table-column>
            <el-table-column property="marketPrice" label="市场价" align='center' width="100">
                <template slot-scope="scope">
                    {{scope.row.marketPrice?scope.row.marketPrice.decimalTwoString:'--'}}
                </template>
            </el-table-column>
            <el-table-column property="internalPrice" label="会员价" align='center' width="100">
                <template slot-scope="scope">
                    {{scope.row.internalPrice?scope.row.internalPrice.decimalTwoString:'--'}}
                </template>
            </el-table-column>

            <el-table-column prop="operation" align='center' label="" :width="search.status!='UP'?340:260">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-search" @click="goLook(scope.row)">查看</el-button>
                    <el-button size="mini" type="success" plain icon="el-icon-edit" @click="goEdit(scope.row,2)">修改</el-button>
                    <el-button v-if="search.status=='WAIT_AUDIT'" type="danger" size="mini" @click="goodsUp(scope.row)">审核</el-button>	
                    <el-button v-else-if="search.status=='DOWN'" type="success" size="mini" @click="goodsUp(scope.row)">上架</el-button>	
                    <el-button v-else-if="search.status=='UP'" type="primary" size="mini" @click="goodsDown(scope.row)">下架</el-button>
                    <el-button v-if="search.status!='UP'" size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </my-table>
    </mian-layout>
</template>
<script>
import myTable from '@/components/public/myTable';
import goodsCategory from '@/components/public/goodsCategory.vue';
import {
  getGoodsList,
  goodsUp,
  goodsDown,
  del_goods
} from '@/api/arApi'
import myDialog from '@/components/public/myDialog';
export default {
    components:{
      myTable,
      goodsCategory,
      myDialog
    },
    data(){
        return{
            search:{
                goodsType:'',
                title:'',
                status:'WAIT_AUDIT',
                goodsCategoryId:'',
                createTimeEnd: "",
                createTimeStart: ""
            },
            dataTime:'',
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            totalRow:{}
        }
    },
    created(){
        this.getList()
        console.log("环境变量VUE_APP_API_SEARVER：",process.env.VUE_APP_API_SEARVER)
    },
    mounted(){
        
    },
    methods:{
        getList(callback){
            this.loading = true
            if(this.dataTime){
                this.search.createTimeStart = this.dataTime[0]
                this.search.createTimeEnd = this.dataTime[1]
            }
            getGoodsList({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
                this.totalRow = res.totalRow
                callback && callback()
            })
        },
        doSearch(){
            this.page.pageIndex = 1;
            this.getList();
        },
        refreshData(){
            this.page.pageIndex = 1;
            this.getList();
        },
        tableSelect(data){
            console.log("GGGG:",data)
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        reSetData(){
            this.search.goodsType=''
            this.search.title=''
            this.search.goodsCategoryId=''
            this.search.createTimeEnd=''
            this.search.createTimeStart=''
            
            this.page.pageIndex = 1;
            this.getList();
        },
        async goodsUp(item){
            const res = await goodsUp({goodsId:item.goodsId})
            if(res.success){
                this.$message.success('上架成功')
                this.getList()
            }else{
                this.$message.error(res.message)
            }
        },
        async goodsDown(item){
            const res = await goodsDown({goodsId:item.goodsId})
            if(res.success){
                this.$message.success('下架成功')
                this.getList()
            }else{
                this.$message.error(res.message)
            }
        },

        del(item) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let fromData = new FormData()
				fromData.append('goodsId', item.goodsId)
                const res = await del_goods(fromData)
                if(res.success){
                    this.$message.success('删除成功')
                    this.page.pageIndex = 1
                    this.getList()
                }else{
                   // this.$message.error('删除失败');
                }
            }).catch(() => {});
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dataTime = []
            for (const key in this.search) {
               this.search[key] = '' 
            }
            this.search.status = 'WAIT_AUDIT',
            this.page.pageIndex = 1
            this.getList()
        },
        goEdit(item,onlyLook){
            //sessionStorage.setItem('details',JSON.stringify(item))
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push(`/goods/add?id=${item.goodsId}&onlyLook=${onlyLook}`)
        },
        goAdd(){
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push('/goods/add')
        },
        goLook(item){
            this.$store.commit('tagsView/SET_REGETDATA',this.getList)  // 设置需要刷新的方法，修改后返回需要刷新数据
            this.$router.push(`/goods/look/${item.goodsId}`)
        }
    }
}
</script>

<style lang="scss" scoped>
    .myanfbtntabbox{
        position: relative;
        z-index: 10;
        .mybtn{
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
        }
    }
</style>